<template>

  <div class="medicines">
    <el-scrollbar ref="scrollMenuRef" class="medicine-scroll">
      <div class="medicine-list">
        <div v-for="(item, index) in medicineList" :key="index" class="list-item">
          <div class="title">{{ item.typeName }}</div>
          <div class="list">
            <div v-for="(subItem, index) in item.children" :key="index" class="sub-item">
              <span class="name">{{ subItem.typeName }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>


export default {
  name: "chinaAndWestMedicine",

  props: [],
  data() {
    return {
      allTypeList:[],
      medicineList: []
    };
  },
  props: {
    typeId: {
      type: Number,
    },
  },
  computed: {


  },
  watch: {
    typeId(newVal, oldVal) {
      console.log(newVal, oldVal, "oldVal catId");
      if(newVal){
        for(let i=0;i<this.allTypeList.length;i++){
          if(this.allTypeList[i].typeId == newVal){
            this.medicineList = this.allTypeList[i].children;
          }
        }
      }
    }
  },

  created() {
    this.initData();
  },

  methods: {
    initData() {
      this.$httpApi("/api/v1/index/medicine/type", {
        },
         "get"
      ).then(res => {
        this.allTypeList = res.data;
        for(let i=0;i<this.allTypeList.length;i++){
          if(this.allTypeList[i].typeId == this.typeId){
            this.medicineList = this.allTypeList[i].children;
          }
        }
        console.log(this.allTypeList,'this.allTypeListthis.allTypeListthis.allTypeList', this.typeId )
      })
    }
  },
};
</script>
<style scoped lang="less">
.medicines {
  background-color: #fff;
  height: 100%;
  width: 100%;

  .medicine-scroll {
    overflow-x: hidden;
    width: 100%;
    height: 100%;

    .medicine-list {
      display: flex;
      width: calc(100% - 10px);
      flex-wrap: wrap;
      height: 100%;
      margin-right:10px;
      border-right: 1px solid #E7E7E7;;


      .list-item {
        margin-top: 20px;
        margin-right: 20px;
        margin-left: 10px;

        .title {
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 16px;
          color: #000000;
          text-align: left;
          width: 100%;
          padding-bottom: 6px;
          border-bottom: 1px dashed #F1F1F1;
        }

        .list {
          margin-top: 6px;
          width: 100%;
          display: flex;
          flex-wrap: wrap;

          .sub-item {
            margin-right: 26px;
            margin-bottom: 4px;

            .name {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: #666666;
            }
          }
        }

       
      }
    }
  }

  /deep/ .el-scrollbar .el-scrollbar__wrap {
    overflow-x: hidden !important;
  }
}
</style>
